<template>
    <el-dialog v-model="dialogVisible" class="edit-name-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :lock-scroll="false" top="20vh" width="300px" title="修改名称" align="center">
        <div class="cell">
            <el-input type="text" size="large" v-model="form.name" placeholder="请输入名称"></el-input>
        </div>

        <div class="form-button">
            <button class="btn" @click="onSubmit">修改</button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ChangeWorkName } from "@/api";

const id = ref("");
const form = reactive({
    name: "",
});
const emit = defineEmits(["success"]);
const dialogVisible = ref(false);

const onSubmit = async () => {
    if (form.name.trim().length === 0) {
        Message().warning("名称不能为空");
        return;
    }
    const res = await ChangeWorkName({
        wid: id.value,
        name: form.name,
    });

    dialogVisible.value = false;
    emit("success");

    if (res.code == 200) {
        Message().success("修改成功");
    } else {
        Message().error(res.msg);
    }
};

defineExpose({
    show(_id, name) {
        id.value = _id;
        form.name = name;
        dialogVisible.value = true;
    },
});
</script>
<style lang="scss" scoped>
.edit-name-dialog {
    .cell {
        margin-bottom: 20px;
    }

    .form-bottom {
        display: flex;
    }

    .btn {
        width: 80px;
        outline: none;
        border: none;
        background-color: #5185fb;
        color: #fff;
        font-size: 16px;
        height: 32px;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>
